$grid-breakpoints: (
  xxs: 375px,
  xss: 400px,
  xsg: 599px,
  xs: 768px,
  sm: 1024px,
  md: 1366px,
  lg: 1440px,
  lgx: 1540px,
  xl: 1920px,

  slg: 1600px,
  mlg: 1750px,
  llg: 1900px,
);

@mixin media($name, $breakpoints: $grid-breakpoints) {
  $max: map-get($breakpoints, $name);

  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-min($name, $breakpoints: $grid-breakpoints) {
  $max: map-get($breakpoints, $name);

  @if $max {
    @media (min-width: calc($max - 15px)) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-between($nameMin, $nameMax, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $nameMin);
  $max: map-get($breakpoints, $nameMax);

  @if not $min {
    $min: $nameMin;
  }

  @if not $max {
    $max: $nameMax;
  }

  @media (min-width: $min) and (max-width: $max) {
    @content;
  }
}

@mixin aspect($width: 1, $height: 1) {
  aspect-ratio: $width / $height;

  @supports not (aspect-ratio: $width / $height) {
    &::before {
      content: '';
      float: left;
      padding-top: calc((#{$height} / #{$width}) * 100%);
    }

    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }
}
